<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
</head>
<body>
    <h1>聊天室客户端</h1>
    <textarea id="text"></textarea>
    <button id="btn">发送消息</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.js"></script>
<script type="text/javascript">
    let socket=io.connect("localhost:5000");//连接socket服务
    var myMes="";
    document.getElementById("btn").onclick=function () {
        let mes=document.getElementById("text").value;//获取文本输入框的值
        if(!mes){
            return;
        }else{
            myMes=mes;
            socket.send(mes);//发送消息给服务器
            document.getElementById("text").value="";
        }
    };
    //当服务器广播消息的时候 会触发一个消息事件并且广播的消息会存在于回调中
    socket.on("message",function (mes) {
        let p=document.createElement("p");
        p.innerText=mes;
        if(mes===myMes){
            p.style.cssText="color:red;font-weight:bold"
        }
        document.body.appendChild(p);
    })
</script>
</html>